<template>
	<view class="content">
		<view class="luckyDraw" v-show="loop || isShow">
			<tm-choujiang :list="list" @end="endContent"></tm-choujiang>
			<tm-alerts  :label="prompt"  v-model="isShow" close></tm-alerts>
		</view>
		<view class="signature" v-if="write">
			<view>请签名确认</view>
			<tm-signBoard ref="demo"></tm-signBoard>
			<tm-button @click="$refs.demo.clear()" theme="blue">清除签名</tm-button>
			<tm-button @click="save" theme="blue">确认签名</tm-button>
		</view>
		<view v-show="!isShow && !write && flag == 1" class="preview">
			<tm-images :src="img" :width="500" :height="500"></tm-images>
		</view>
	</view>
</template>
<script>
	export default {
		name:"home",
		data() {
			return {
				prompt: '',
				isShow:false,
				write:false,
				flag:"",
				loop:true,
				img:'',
				list:[
	         { 
		name: '吃饭', //奖品名称
		gailv: 50, //概率，所有奖品概率+一起要==100
		id: 1, //奖奖品id.
	      },
		  {
		  name: '不吃饭', //奖品名称
		  gailv: 50, //概率，所有奖品概率+一起要==100
		  id: 2, //奖奖品id.
		    }
]
			}
		},
		watch: {
			 isShow(val) {
				if(!val){
				this.write = true 	
				} 
			}
		},
		onReady() {
	      this.$NavHide()
		},
		onLoad() {
           
		},
		methods: {
          endContent(a){
			  this.loop = false
			  this.isShow = true
			if(a.id == 1){
				this.prompt = `您抽到的是${a.name},人是铁,饭是钢`
			}else{
				this.prompt = `您抽到的是${a.name},节食就是减肥`
			}
		  },
		  save(){
		 let _this = this
		 uni.showToast({
			icon:'success',
		 	title:"保存签名成功",
			success() {
				_this.$refs.demo.save().then(res=>{
				 _this.img = res
				})
				_this.$refs.demo.clear()
				_this.write = false
				_this.flag = 1
			}
			
		 })
		 
		  }
		}
	}
</script>

<style lang="scss">
	.content {
		position: relative;
		width: 100vw;
		height: 100%;
		.luckyDraw{
			margin: 0 auto;
	   }
	.signature{
		height: 500rpx;
		width: 100%;
		background-color: lightyellow;
	}
	.preview{
		height: 500rpx;
		width: 80%;
		margin: 0 auto;
	    background-color: #fff;
		box-shadow: 4px 4px 9px rgba(0, 0, 0, .5);
	}
	}
</style>
